<template>
    <div class="page public-box">
         <div class="header-btn">
            <el-button class="btn add-user" type="primary" @click="handleAddCheckJournalClick">添加日志</el-button>
            <el-date-picker
                v-model="date"
                class="date"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-DD"
                :picker-options="pickerOptions"
                @change="handleChangeDateClick">
            </el-date-picker>
        </div>
        <el-table
            :data="checkJournalTableData"
            border
            style="width: 100%"
            class="el-table-public"
            height="100%">
            <el-table-column
                prop="date"
                label="日期">
            </el-table-column>
            <el-table-column
                prop="name"
                label="日志">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
        </el-table>
         <el-dialog title="添加新用户" :visible.sync="addCheckJournalDialog">
            <el-form :model="addCheckJournalForm" :label-width="formLabelWidth">
                <el-form-item label="日志：" >
                    <el-input v-model="addCheckJournalForm.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addCheckJournalDialog = false">确 定</el-button>
                <el-button @click="addCheckJournalDialog = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'vue',
    data() {
        return {
            checkJournalTableData: [
                {
                    date: '2016-05-02',
                    name: '日志1',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '日志2',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '日志3',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '日志4',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '日志5',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '日志6',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '日志7',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '日志8',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '日志9',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '日志10',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-04',
                    name: '日志11',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-05',
                    name: '日志12',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-12',
                    name: '日志13',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-13',
                    name: '日志14',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-15',
                    name: '日志15',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-16',
                    name: '日志16',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-17',
                    name: '日志17',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ],
            date: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            addCheckJournalForm: {
                name: '',
            },
            addCheckJournalDialog: false,
            formLabelWidth: '80px'
        }
    },
    props: {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    methods: {
        // !添加日志点击事件
        handleAddCheckJournalClick () {
            this.addCheckJournalDialog = true;
        },
        // !时间点击事件
        handleChangeDateClick (val) {
            console.log(this.date)
        }
    },
    created() {

    },
    mounted() {

    }
}
</script>

<style scoped lang="less">
    .date {
        float: right;
    }
 
</style>
